<template>
	<div class="el-overlay-dialog">
		<div class="el-dialog custom-dialog">
			<div class="el-dialog__header">
				<span class="el-dialog__title">百年祭</span>
				<el-icon @click="close" class="el-dialog__headerbtn">
				  <Close />
				</el-icon>
			</div>
			<div class="el-dialog__body"></div>
			<div class="el-dialog__footer"></div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import {
		Close,EditPen,Delete
	} from '@element-plus/icons-vue'
	
	const init=()=>{
		console.log('init');
	}
	defineExpose({ init })

	
	const emit = defineEmits([ "close","onMounted"]);
	const close=()=>{
		emit('close');
	}
	
	onDeactivated(()=>{
		console.log('onDeactivated');
	})
	
	onBeforeUnmount(()=>{
		console.log('onBeforeUnmount');
	})
	onUnmounted(()=>{
		console.log('onUnmounted');
	})
	
	onActivated(()=>{
		console.log('onActivated');
	})
	onErrorCaptured(()=>{
		console.log('onErrorCaptured');
	})
	
	onMounted(() => {
		console.log('onMounted');
		emit('onMounted');
	});
</script>

<style scoped>
	
	.dialog{
		
		    --el-dialog-width: 50%;
		    --el-dialog-margin-top: 15vh;
		    --el-dialog-bg-color: var(--el-bg-color);
		    --el-dialog-box-shadow: var(--el-box-shadow);
		    --el-dialog-title-font-size: var(--el-font-size-large);
		    --el-dialog-content-font-size: 14px;
		    --el-dialog-font-line-height: var(--el-font-line-height-primary);
		    --el-dialog-padding-primary: 20px;
		    --el-dialog-border-radius: var(--el-border-radius-small);
		    position: relative;
		    margin: var(--el-dialog-margin-top,15vh) auto 50px;
		    background: var(--el-dialog-bg-color);
		    border-radius: var(--el-dialog-border-radius);
		    box-shadow: var(--el-dialog-box-shadow);
		    box-sizing: border-box;
		    width: var(--el-dialog-width,50%);
		
		.head{
			margin-right: 0px !important;
			padding: 0.5rem !important;
			border: 1px solid #424a5e;
			border-bottom: 1px solid #424653 !important;
			
			.title{
				color: #ccc !important;
				font-size: 16px;
			}
			.btn{
				position: absolute;
				top: 0rem !important;
				width: 30px !important;
				height: 30px !important;
				margin: 5px;
			}
			
		}
		.body{
			
		}
		.footer{
			
		}
	}
</style>